<template>
  <div class="edit-phone-container">
    <ul class="edit-form">
      <li>
        <p>原手机号码</p>
        <van-field
          v-model="oldPhone"
          placeholder="请输入原手机号码"
          :error-message="oldPhoneError"
          readonly
        />
      </li>
      <li>
        <p>手机验证码</p>
        <van-field
          v-model="oldPhoneCode"
          placeholder="请输入"
          maxlength="6"
          :error-message="oldPhoneCode ? '' : oldPhoneCodeError"
        >
          <template #button>
            <span
              class="color-primary"
              @click="getCode"
              v-if="showGetBtn"
            >{{ isClickBtn ? '重新获取' : '获取验证码' }}</span>
            <span v-else>{{ reGetTime }} s</span>
          </template>
        </van-field>
      </li>
    </ul>

    <van-button
      square
      size="normal"
      type="primary"
      block
      @click="nextFn"
    >下一步</van-button>
  </div>
</template>

<script>
import { Field, Button } from 'vant';
import { getMsgCode } from '@/api/login.js';

export default {
  name: 'EditPhone',
  components: {
    [Field.name]: Field,
    [Button.name]: Button
  },
  data() {
    return {
      oldPhone: '',
      oldPhoneCode: '',
      oldPhoneError: '',
      oldPhoneCodeError: '',
      showGetBtn: true,
      isClickBtn: false,
      reGetTime: 59
    };
  },
  created() {
    this.oldPhone = this.$route.query.phone || '';
  },
  methods: {
    // 获取验证码
    getCode() {
      this.oldPhoneError = '';
      this.oldPhoneCodeError = '';
      if (!this.oldPhone) {
        this.oldPhoneError = '请输入原手机号码';
        return;
      }
      let phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (!phoneReg.test(this.oldPhone)) {
        this.oldPhoneError = '请输入正确的手机号码';
        return;
      }

      getMsgCode({
        telephone: this.oldPhone,
        smsType: 'EDIT_MOBILE'
      }).then(res => {
        this.$toast('验证码已发送，请注意查收');
        this.isClickBtn = true;
        this.showGetBtn = false;
        this.countDownFn();
      });
    },
    // 倒计时
    countDownFn() {
      let timer = setInterval(() => {
        if (this.reGetTime > 1) {
          this.reGetTime--;
        } else {
          clearInterval(timer);
          this.reGetTime = 59;
          this.showGetBtn = true;
        }
      }, 1000);
    },
    // 下一步
    nextFn() {
      this.oldPhoneError = '';
      this.oldPhoneCodeError = '';
      if (!this.oldPhone) {
        this.oldPhoneError = '请输入原手机号码';
        return;
      }
      let phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (!phoneReg.test(this.oldPhone)) {
        this.oldPhoneError = '请输入正确的手机号码';
        return;
      }
      if (!this.oldPhoneCode) {
        this.oldPhoneCodeError = '请输入手机验证码';
        return;
      }

      this.$router.push({
        name: 'editPhoneNext',
        query: {
          oldPhone: this.oldPhone,
          oldPhoneCode: this.oldPhoneCode
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.edit-phone-container {
  width: 100%;
  height: 100%;
  padding: 0.213333rem 0.426667rem 0;
  background-color: #fff;

  .edit-form {
    width: 100%;

    li {
      padding-top: 0.32rem;

      p {
        margin-bottom: 0.16rem;
        color: var(--color-deep-gray);
        font-size: 0.346667rem;
      }

      .van-field {
        padding-left: 0;
        padding-right: 0;

        ::v-deep .van-field__value {
          padding-bottom: 0.213333rem;
          border-bottom: 1px solid var(--border-color);
        }
      }
    }
  }

  .van-button {
    margin-top: 0.213333rem;
    font-size: 0.426667rem;
    border-radius: 0.106667rem;
    border-color: var(--color-primary);
    background-color: var(--color-primary);
  }
}
</style>